<!-- 文本分类标注结果 -->
<template>
  <div v-if="list.length" class="entity-label">
    <div v-for="item in list" :key="item.id" class="entity-label-wrap">
      <div class="entity-label-item">
        <div class="entity-label-title" :title="item?.name">{{ item?.name }}</div>
        <div class="entity-label-features">
          <div class="icon-btn-list">
            <a-button type="text" class="icon-only-btn" @click.stop="handleDelete(item)">
              <i class="iconfont icon-close-line"></i>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <default-image v-else title="暂无内容" />
</template>

<script setup lang="ts">
  // import { hexToRgb } from '@/utils/index'

  export interface EntityLabelProps {
    // 筛选值
    list?: any[]
  }
  withDefaults(defineProps<EntityLabelProps>(), {
    list: () => []
  })

  const emits = defineEmits<{
    (event: 'delete', data: any): void
  }>()

  // 处理颜色
  // const colorFun = (color: string) => {
  //   return {
  //     color: hexToRgb(color),
  //     background: hexToRgb(color, 0.08)
  //   }
  // }

  /**
   * 删除
   */
  const handleDelete = (item: any) => {
    emits('delete', item)
  }
</script>

<style lang="less" scoped>
  .entity-label {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px 0;
    box-sizing: border-box;

    .entity-label-wrap {
      display: flex;
      align-items: center;
      height: 30px;
      cursor: pointer;
      flex-shrink: 0;

      &:hover {
        .icon-btn-list {
          display: flex !important;
        }
      }

      .entity-label-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6px;
        width: 100%;
        height: 100%;
        color: @text01;
        background: rgba(16, 16, 20, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 6px;

        .entity-label-title {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-weight: 400;
          .elliptical-1();
        }

        .entity-label-features {
          margin-left: 4px;

          .icon-btn-list {
            display: none;
            gap: 0 16px;

            i {
              font-size: 14px;
              color: @text03;
            }
          }
        }
      }
    }
  }
</style>
